﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>在线支付</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

    <!-- CSS here -->
    <link rel="stylesheet" href="assets/css/preloader.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/backToTop.css">
    <link rel="stylesheet" href="assets/css/meanmenu.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
    <link rel="stylesheet" href="assets/css/fontAwesome5Pro.css">
    <link rel="stylesheet" href="assets/css/ui-range-slider.css">
    <link rel="stylesheet" href="assets/css/default.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <style>
        .my-font-weight {
            font-weight: 700;
        }

        .my-pd30-left {
            padding-left: 20px !important;
        }
        .my-border2-top{
            border-top: 2px solid black;
        }
        .my-add-address{
            text-align: center;
        }
        .my-add-button:after{
            position: absolute;
            content: "\f067";
            right: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            font-family: "Font Awesome 5 Pro";
            font-size: 16px;
            font-weight: 400;
            margin-left: 0;
            background-image: none;
        }
        #ship-box-info{
            animation: myAnimation 1s infinite;
            animation-iteration-count: 1;
        }
        @keyframes myAnimation{
            0%{
                height: 0;
            }
            100%{
                height: 800px;
            }
        }
        .checkout-area li:hover{
            background-color: #222222;
            color: #fff;
        }
        #ship-box-info .list{
            height: 300px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
    your browser</a> to improve your experience and security.</p>
<![endif]-->

<!-- Add your site or application content here -->

<!-- preloader area start -->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div id="object"></div>
        </div>
    </div>
</div>
<!-- preloader area end -->

<!-- back to top start -->
<div class="progress-wrap">
    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
    </svg>
</div>
<!-- back to top end -->

<!-- header area start -->
<header>
    <div class="header__area">
        <div class="header__top header__padding d-none d-sm-block">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-xl-6 col-lg-6 col-md-5 d-none d-md-block">
                        <div class="header__welcome">
                            <span>欢迎来到在线支付页面</span>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-7">
                        <div class="header__action d-flex justify-content-center justify-content-md-end">
                            <ul>
                                <li class="d-none d-xl-inline-block">
                                    <a th:if="${session.loginUser!=null}" href="javascript:;" th:text="${session.loginUser==null?'':session.loginUser.nickname}"></a>
                                    <a th:if="${session.loginUser==null}" href="http://huyulu666.top/login.html">登录/注册</a>
                                </li>
                                <li><a href="http://huyulu666.top:81/">个人信息管理中心</a></li>
                                <li><a href="http://huyulu666.top/center.html">我的订单</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- header area end -->

<!-- offcanvas area start -->
<div class="offcanvas__area">
    <div class="offcanvas__wrapper">
        <div class="offcanvas__close">
            <button class="offcanvas__close-btn" id="offcanvas__close-btn">
                <i class="fal fa-times"></i>
            </button>
        </div>
        <div class="offcanvas__content">
            <div class="offcanvas__logo mb-40">
                <a href="index.html">
                    <img src="assets/img/logo/logo-black.png" alt="logo">
                </a>
            </div>
            <div class="offcanvas__search mb-25">
                <form action="#">
                    <input type="text" placeholder="What are you searching for?">
                    <button type="submit"><i class="far fa-search"></i></button>
                </form>
            </div>
            <div class="mobile-menu-2 fix"></div>
            <div class="offcanvas__action">

            </div>
        </div>
    </div>
</div>
<!-- offcanvas area end -->
<div class="body-overlay"></div>
<!-- offcanvas area end -->

<main>

    <!-- breadcrumb area start -->
    <section class="breadcrumb__area box-plr-75">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xxl-12">
                    <div class="breadcrumb__wrapper">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="http://huyulu666.top/index.html">首页</a></li>
                                <li class="breadcrumb-item active" aria-current="page">在线支付</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->

    <!-- 灰色区域 start -->
    <section class="coupon-area pb-30">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="coupon-accordion">
                        <!-- ACCORDION START -->
                        <h3>忘记了拥有物品的信息？<a href="javascript:;"><span id="showlogin">点击这里进入个人中心</span></a></h3>
                        <!-- ACCORDION END -->
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="coupon-accordion">
                        <!-- 优惠券 START -->
                        <h3>拥有优惠券? <span id="showcoupon">点击这里使用您的优惠券</span></h3>
                        <div id="checkout_coupon" class="coupon-checkout-content">
                            <div class="coupon-info">
                                <form action="#">
                                    <p class="checkout-coupon">
                                        <input type="text" placeholder="输入您的优惠券编号"/>
                                        <button class="t-y-btn t-y-btn-grey" type="submit" style="font-weight: 700">申请使用</button>
                                    </p>
                                </form>
                            </div>
                        </div>
                        <!-- 优惠券 END -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 灰色区域 end -->

    <!-- checkout-area start -->
    <section class="checkout-area pb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="checkbox-form">
                        <h3>收货地址</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="country-select my-address-div">
                                    <label>选择您的收货地址 <span class="required">*</span></label>
                                    <select>
                                        <option th:value="${address.id}" th:each="address:${orderInfo.address}">
                                            <div class="my-address">
                                                <div th:text="${address.name}"></div>
                                                <div th:text="${address.phone}"></div>
                                                <div th:text="${address.province}"></div>
                                                <div th:text="${address.university}"></div>
                                                <div th:text="${address.detailAddress}"></div>
                                            </div>
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- 添加新的收货地址 -->
                        <div class="different-address">
                            <div class="ship-different-title">
                                <h3>
                                    <!--<input id="ship-box" type="checkbox"/>-->
                                    <button class="accordion-button" type="button" th:onclick="addBtnClick()"
                                            data-bs-toggle="collapse" data-bs-target="#ship-box-info" aria-expanded="true"
                                            aria-controls="ship-box-info">
                                        添加一个新的收货地址
                                    </button>
                                </h3>
                            </div>
                            <div id="ship-box-info" class="collapse show">
                                <form action="/orderWeb/addAddress" method="post">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>姓名 <span class="required">*</span></label>
                                                <input type="text" name="name" placeholder="请输入收货人姓名"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="country-select">
                                                <label>省 <span class="required">*</span></label>
                                                <!-- 省份地址 -->
                                                <select class="my_selected" name="province" data-edit-select="1" onmousedown="if(this.options.length>3){this.size=8}" onblur="this.size=0" onchange="this.size=0" style="position:absolute;z-index:1;">
                                                    <option value="北京">北京</option>
                                                    <option value="天津">天津</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                    <option value="广西">广西</option>
                                                    <option value="香港">香港</option>
                                                    <option value="澳门">澳门</option>
                                                    <option value="宁夏">宁夏</option>
                                                    <option value="河北省">河北省</option>
                                                    <option value="山西省">山西省</option>
                                                    <option value="辽宁省">辽宁省</option>
                                                    <option value="吉林省">吉林省</option>
                                                    <option value="黑龙江省">黑龙江省</option>
                                                    <option value="江苏省">江苏省</option>
                                                    <option value="浙江省">浙江省</option>
                                                    <option value="安徽省">安徽省</option>
                                                    <option value="福建省">福建省</option>
                                                    <option value="江西省">江西省</option>
                                                    <option value="山东省">山东省</option>
                                                    <option value="河南省">河南省</option>
                                                    <option value="湖北省">湖北省</option>
                                                    <option value="湖南省">湖南省</option>
                                                    <option value="广东省">广东省</option>
                                                    <option value="海南省">海南省</option>
                                                    <option value="四川省">四川省</option>
                                                    <option value="贵州省">贵州省</option>
                                                    <option value="云南省">云南省</option>
                                                    <option value="陕西省">陕西省</option>
                                                    <option value="甘肃省">甘肃省</option>
                                                    <option value="青海省">青海省</option>
                                                    <option value="台湾省">台湾省</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="checkout-form-list">
                                                <label>市 <span class="required">*</span></label>
                                                <input type="text" name="city" placeholder="请输入收货人所在市"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="checkout-form-list">
                                                <label>学校 </label>
                                                <input type="text" name="university" placeholder="请输入收货人的学校"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="checkout-form-list">
                                                <label>学院 </label>
                                                <input type="text" name="academy" placeholder="请输入收货人的学院"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="checkout-form-list">
                                                <label>专业 </label>
                                                <input type="text" name="major" placeholder="请输入收货人所在专业"/>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="checkout-form-list">
                                                <label>详细地址 <span class="required">*</span></label>
                                                <input type="text" name="detailAddress" placeholder="请输入收货人详细地址"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="checkout-form-list">
                                                <label>联系电话 <span class="required">*</span></label>
                                                <input type="text" name="phone" placeholder="请输入收货人联系方式"/>
                                            </div>
                                        </div>
                                        <div class="col-md-12" style="font-size: 16px">
                                            <input type="checkbox" name="defaultStatus" /> 设置为默认地址？
                                        </div>
                                    </div>
                                    <div class="my-add-address">
                                        <button class="t-y-btn t-y-btn-grey" type="submit" style="font-weight: 700;">确认添加</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 订单信息 -->
                <div class="col-lg-6">
                    <div class="your-order mb-30 ">
                        <h3>我的订单</h3>
                        <div class="your-order-table table-responsive">
                            <table>
                                <thead>
                                    <!-- 书籍头 -->
                                    <tr>
                                        <th class="product-name">书籍名称</th>
                                        <th class="product-total">单项价格</th>
                                    </tr>
                                </thead>
                                <!-- 购物项 -->
                                <tbody>
                                    <!-- 购物车中购物项-->
                                    <tr class="cart_item" th:each="item:${orderInfo.items}">
                                        <td class="product-name my-pd30-left">
                                            <p th:text="${item.name}" style="display: inline"></p>
                                            <strong class="product-quantity" th:text="' × ' + ${item.count}"> × 1</strong>
                                            <strong th:if="${item.stock < item.count}" th:attr="hasStock=${item.stock >= item.count}" class="product-quantity hasStock" th:text="'（库存不足，剩余库存：' + ${item.stock} + ' ）'"></strong>
                                        </td>
                                        <td class="product-total">
                                            <span class="amount" th:text="${#numbers.formatDecimal(item.getTotalPrice(),1,'COMMA',2,'POINT')}"> 165.00</span>
                                        </td>
                                    </tr>
                                </tbody>
                                <!-- 统计信息 -->
                                <tfoot class="my-border2-top">
                                    <tr class="cart-subtotal">
                                        <th>小计</th>
                                        <td><span class="amount" th:text="${#numbers.formatDecimal(orderInfo.getTotal(),1,'COMMA',2,'POINT')}"> 165.00</span></td>
                                    </tr>
                                    <tr class="cart-subtotal">
                                        <th>运费</th>
                                        <td><span class="freight" th:text="${#numbers.formatDecimal(orderInfo.expressPrice,1,'COMMA',2,'POINT')}"> 8.00</span></td>
                                    </tr>
                                    <tr class="cart-subtotal">
                                        <th>优惠减免</th>
                                        <td><span class="reduce" th:text="'-'+${#numbers.formatDecimal(orderInfo.coupon,1,'COMMA',2,'POINT')}">-20.00</span></td>
                                    </tr>
                                    <tr class="cart-subtotal">
                                        <th>积分抵扣</th>
                                        <td><span class="integration" th:text="'-'+${#numbers.formatDecimal(orderInfo.integration/1000.00,1,'COMMA',2,'POINT')}">-20.00</span></td>
                                    </tr>
                                    <tr class="order-total">
                                        <th>最终价格</th>
                                        <td><strong><span class="finalPrice" th:text="'￥'+${#numbers.formatDecimal(orderInfo.getPayPrice(),1,'COMMA',2,'POINT')}">￥215.00</span></strong>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <form action="http://huyulu666.top/submitOrder" method="post">
                            <input type="hidden" name="orderToken" th:value="${orderInfo.orderToken}">
                            <input id="addressIdInput" type="hidden" name="addressId" value="">
                            <input id="payPriceInput" type="hidden" name="payPrice">
                            <input id="reducePriceInput" type="hidden" name="reducePriceInput" th:value="${orderInfo.coupon}">
                            <input id="integrationInput" type="hidden" name="integrationInput" th:value="${orderInfo.integration/1000.00}">
                            <input id="couponIdInput" type="hidden" name="couponIdInput">
                            <!-- 支付选项和支付按钮 -->
                            <div class="payment-method">
                                <div class="accordion" id="checkoutAccordion">
                                    <div class="accordion-item">
                                        <input  type="hidden" name="payType" value="2">
                                        <h2 class="accordion-header" id="checkoutOne">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#bankOne" aria-expanded="true"
                                                    aria-controls="bankOne">
                                                支付宝支付
                                            </button>
                                        </h2>
                                        <div id="bankOne" class="accordion-collapse collapse show"
                                             aria-labelledby="checkoutOne" data-bs-parent="#checkoutAccordion">
                                            <div class="accordion-body">使用支付宝进行扫码支付</div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="paymentTwo">
                                            <button class="accordion-button collapsed" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#payment"
                                                    aria-expanded="false" aria-controls="payment">
                                                微信支付
                                            </button>
                                        </h2>
                                        <div id="payment" class="accordion-collapse collapse"
                                             aria-labelledby="paymentTwo" data-bs-parent="#checkoutAccordion">
                                            <div class="accordion-body">使用微信进行扫码支付</div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="paypalThree">
                                            <button class="accordion-button collapsed" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#paypal"
                                                    aria-expanded="false" aria-controls="paypal">
                                                线下支付
                                            </button>
                                        </h2>
                                        <div id="paypal" class="accordion-collapse collapse"
                                             aria-labelledby="paypalFour" data-bs-parent="#checkoutAccordion">
                                            <div class="accordion-body">支付时，由卖家在校内为您配送，采用当面支付，货到付款</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-button-payment mt-20">
                                    <button id="toPay" type="submit" class="t-y-btn t-y-btn-grey my-font-weight">提交订单</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- checkout-area end -->

</main>

<!-- JS here -->
<script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/meanmenu.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/backToTop.js"></script>
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/countdown.js"></script>
<script src="assets/js/nice-select.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/jquery-ui-slider-range.js"></script>
<script src="assets/js/ajax-form.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        setDefaultAddress();
        // let hasStock = $(".hasStock").attr("hasStock");
        let msg = [[${msg}]];
        console.log(msg)
        if (msg != null && msg != undefined){
            alert(msg)
        }
    })
    //重新设置默认收货地址
    function setDefaultAddress() {
        let addressList = [[${orderInfo.address}]];
        // console.log(addressList)
        //设置默认地址
        for (let i = 0; i < addressList.length; i ++){
            // console.log(addressList[i])
            let address = addressList[i];
            if (address.defaultStatus == "0"){
                //重新设置被选中的默认地址
                let liList = $(".my-address-div li");
                $(".my-address-div .current").text("");
                for (let j = 0; j < liList.length; j ++){
                    let liItem = liList.eq(j);
                    liItem.removeClass("selected");
                    if (liItem.attr("data-value") == address.id){
                        liItem.addClass("selected");
                        //重新设置显示的默认地址
                        $(".my-address-div .current").text(" " + address.name + " " + address.phone + " " + address.province + " " + address.university + " " + address.detailAddress + " ");
                    }
                }
            }
        }
    }
    //根据选中收货地址计算运费，并将所选地址、应付总额回填到支付表单中
    $(".my-address-div .current").bind("DOMNodeInserted", function () {
        let addressId = $(".my-address-div li.selected").attr("data-value");
        if(addressId == undefined || addressId == null || addressId == "") return false;
        $("#addressIdInput").val(addressId);    //回填收货地址id
        // console.log(addressId)
        $.ajax({
            type: "get",
            // data : {'dbId':node.dbId,'viewId':node.id,'date':new Date()},
            url: "http://huyulu666.top/orderWeb/getFare?addressId=" + addressId,
            dataType: "json",

            success: function(response) {
                console.log(response)
                $(".freight").text(response.toFixed(2));
                let finalPrice = [[${orderInfo.getTotal()}]];
                let freight = $(".freight").text();
                // console.log(finalPrice + "+" + freight);
                let price = finalPrice+freight*1.0;
                $(".finalPrice").text("￥" + price);
                $("#payPriceInput").val(price);     //回填应付总额
            },
            error: function(data) {}
        });
    })
    //添加一个新的收货地址
    function addBtnClick() {
        let display = $("#ship-box-info").css("display");
        if(display == "none"){
            $("#ship-box-info").css("display", "block");
        } else {
            $("#ship-box-info").css("display", "none");
        }
    }
</script>
</body>
</html>
